import React, {Component} from 'react';

// 完成 SearchInput 与 List 的交互
const searchDecorator = WrappedCMP => class SearchDecorator extends Component {
  constructor (props) {
    super(props);
    this.handleSearch = this.handleSearch.bind(this);
  }
  handleSearch (keyword) {
    this.setState({
      data: this.props.data,
      keyWord
    });
    this.props.onSearch(keyword);
  }
  render () {
    const {data, keyword} = this.state;
    return (
      <WrappedCMP
        {...this.props}
        data={data}
        keyword={keyword}
        onSearch={this.handleSearch}
      ></WrappedCMP>
    )
  }
}

// 完成 List 数据请求
const asyncSelectDecorator = WrappedCMP=> class AsyncSelectDecorator extends Component {
  componentDidMount () {
    const {url, params} = this.props;
    fetch(url, {params}).then(data => {
      this.setState({
        data
      });
    });
  }

  render () {
    return (
      <WrappedCMP
        {...this.props}
        data={this.state.data}
      ></WrappedCMP>
    );
  }
}

const FinalSelector = compose(asyncSelectDecorator, searchDecorator, selectedItemDecorator)(Selector);

class SearchSelect extends Component {
  render () {
    return (
      <FinalSelector {...this.props}>
        <SelectInput></SelectInput>
        <SearchInput></SearchInput>
        <List></List>
      </FinalSelector>
    )
  }
}
